<template>
    <div class="most-popular-recommended">
        <div class="w-full">
            <recommended-top-bar top-bar-name="榜单">
            </recommended-top-bar>
        </div>
        <div class="recommended-box">
            <div v-for="(item, index) in (topListData.list || '').slice(0, 3)" :key="index" class="w-1/3">
                <most-popular-recommended-item
                    :playlist-id="item.id"
                    :playlist-name="item.name"
                    :playlist-cover-img="item.coverImgUrl">
                </most-popular-recommended-item>
            </div>
        </div>
    </div>
</template>

<script>
import RecommendedTopBar from "@/views/recommend/RecommendedTopBar";
import MostPopularRecommendedItem from "@/views/recommend/most-popular-list/MostPopularRecommendedItem";
import {getTopListDetail} from "@/network/song/song-list";
import {onMounted, ref} from "vue";

export default {
    name: "MostPopularRecommended",
    components: {
        RecommendedTopBar,
        MostPopularRecommendedItem
    },
    setup() {
        // 所有榜单详情，不包含歌曲
        let topListData = ref({});
        
        const init = () => {
            getTopListDetail().then(res => {
                topListData.value = res.data;
            })
        }
        onMounted(() => {
            init();
        })
        
        return {
            topListData
        }
    }
}
</script>

<style scoped lang="scss">
.most-popular-recommended {
    .recommended-box {
        @apply flex bg-blue-500 m-4;
    }
}
</style>